<template>
	<view>
		<view class="module ">
			<uNavbar :title="names" :bgColor="backgroundColor" :titleStyle="titleStyle" leftIconColor="#ffffff" rightText="权益规则" @rightClick="goTagglePage" ></uNavbar>
			<image class="bgimg" src="../../static/image/bg7.png" mode="aspectFill"></image>

			<view class="equity flex_Z">
				<text class="f32 c0">可领取收益：{{shopInfo.claimable_amount}}福合通宝</text>
				<text class="cumulative">已累计分润{{shopInfo.claimed_amount}}福合通宝</text>
				<text class="receive" v-if="shopInfo.claimable_amount>0" @click="boxShow1 = true">领取到钱包</text>
				<text class="receive_a" v-else>暂无收益</text>
			</view>
			<view class="interests flex_dq">
				<view class="interests_l flex_c">
					<image :src="shopGoods.images" mode="aspectFill"></image>
				</view>
				<view class="interests_c flex_Z">
					<text>{{shopGoods.name}}</text>
					<view class="interests_c_tj flex_dq">
						<image src="../../static/icon/i_hot.png" mode="aspectFill"></image>
						<text>本月售出</text>
					</view>
					<view class="interests_number flex_dq">
						<text>{{shopGoods.sold_out_num}}</text>
						<text>件</text>
					</view>
				</view>
			</view>
			
			<view class="profit flex_Z">
				<text class="share">我的份额：{{shopInfo.profit_num}}</text>
				<view class="profit_box flex_ld_b">
					<view class="profit_box_l ">
						<text class="profit_box_tit">参与均分总份额</text>
						<text class="profit_number">{{shopInfo.profit_average_num}}</text>
					</view>
					<view class="profit_box_r ">
						<text class="profit_box_tit">本月卡牌分润池已累积（福合通宝）</text>
						<text class="profit_number">{{shopInfo.profit_pool_month}}</text>
					</view>
				</view>
				<view class="tips flex_Z">
					<view class="synthesis flex_ld">
						<text> 参与条件：持有自由流通的{{foreheadGoods.goods_name}}</text>
					</view>
					<text class="f24 c9">*以每个自然月月末最后一天23:59:59快照数据为分润依据</text>
				</view>
			</view>

			<view class="profit flex_Z" v-if="syShow">
				<text class="share">我的份额：{{shopInfo.voucher_num}}</text>
				<view class="profit_box flex_ld_b">
					<view class="profit_box_l ">
						<text class="profit_box_tit">参与均分总份额</text>
						<text class="profit_number">{{shopInfo.voucher_average_num}}</text>
					</view>
					<view class="profit_box_r ">
						<text class="profit_box_tit">本月专卖店分润池已累积（福合通宝）</text>
						<text class="profit_number">{{shopInfo.voucher_pool_month}}</text>
					</view>
				</view>
				<view class="tips flex_Z">
					<view class="synthesis flex_ld">
						<text> 参与条件：持有{{syGoods.goods_name}}</text>
						<text class="synthesis_box" v-if="shopInfo.voucher_num == 0" @click="goSynthesis">去合成</text>
					</view>
					<text class="f24 c9">*以每个自然月月末最后一天23:59:59快照数据为分润依据</text>
				</view>
			</view>

			<u-popup :show="boxShow1" mode="center" @close="boxShow1 = false" closeable bgColor="transparent">
				<view class="prompt flex_ZC">
					<text class="f32 c3">提示</text>
					<view class="user_card flex_dq">
						<text class="f26 c6">确定要领取吗？</text>
					</view>
					<view class="btn_xz flex_ld_b">
						<text @click="boxShow1 = false">取消</text>
						<text @click="clickReceive">确认</text>
					</view>
				</view>
			</u-popup>

		</view>
	</view>
</template>

<script>
	import {
		brandEquity,
		receiveGoodsProfit
	} from "../../api/store.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				titles: "",
				ids: '',
				names:'',
				backgroundColor: "transparent",
				titleStyle: {
					color: '#ffffff'
				},
				syShow:false,
				boxShow1: false,
				shopInfo: {},
				foreheadGoods: {},
				shopGoods: {},
				syGoods: {}
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
			this.names += e.name + '权益'
			this.initDetail()
		},
		methods: {
			// 初始化
			initDetail() {
				let data = {
					goods_id: this.ids,
				};
				brandEquity(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.shopInfo = res.data
						this.foreheadGoods = res.data.goods
						this.shopGoods = res.data.shop_goods
						this.syGoods = res.data.sy_goods
						if(this.syGoods){
							this.syShow = true
						}
					}
				})
			},
			goSynthesis() {
				console.log(this.syGoods.id);
				uni.navigateTo({
					url: '/pagesMy/debris/cpdebrisdetail?id=' + this.syGoods.id
				})
			},
			// 领取
			clickReceive() {
				let data = {
					goods_id: this.ids,
				};
				receiveGoodsProfit(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						this.initDetail()
						this.boxShow1 = false
					}
				})
			},
			goTagglePage() {
				uni.navigateTo({
					url: '/pagesMy/brandCenter/equityRules'
				})
			},
		},
	}
</script>

<style scoped>
	.module {
		position: relative;
		width: 100%;
		height: 500rpx;
		/* background: url('../../static/image/bg7.png');
		background-size: 100% 100%; */
	}

	.bgimg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 500rpx;
		z-index: 1;
	}

	.equity {
		position: relative;
		margin-top: 120rpx;
		margin-left: 48rpx;
		z-index: 9;
	}

	.cumulative {
		font-size: 24rpx;
		color: #ffffff80;
		margin: 24rpx 0;

	}

	.receive {
		width: 186rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #FF0000;
		text-align: center;
	}

	.receive_a {
		width: 186rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #f3f4f6;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #66666680;
		text-align: center;
	}

	.interests {
		position: relative;
		width: 690rpx;
		height: 256rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		margin: 30rpx auto;
		z-index: 999;
	}

	.interests_l {}

	.interests_l>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		margin: 0 24rpx;
	}

	.interests_c {
		margin-left: 20rpx;
	}

	.interests_c>text:nth-child(1) {
		font-size: 34rpx;
		color: #333333;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.interests_c_tj {
		width: 328rpx;
		height: 44rpx;
		background: linear-gradient(91deg, rgba(247, 42, 21, 0.15) 3%, rgba(248, 52, 26, 0) 100%);
		border-radius: 4rpx;
		font-size: 28rpx;
		color: #FE3A1E;
		margin: 20rpx 0;
	}

	.interests_c_tj>image {
		width: 38rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}

	.interests_number {
		color: #FE3A1E;
	}

	.interests_number>text:nth-child(1) {
		font-size: 52rpx;
		font-weight: 700;
		margin-right: 10rpx;
	}

	.interests_number>text:nth-child(2) {
		font-size: 26rpx;
	}
	.profit {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto 30rpx;
	}

	.share {
		padding: 24rpx 28rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.profit_box {
		width: 100%;
	}

	.profit_box_l {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 302rpx;
		height: 198rpx;
		background: #F8F0E5;
		border-radius: 16rpx;
		padding: 20rpx 0;
	}

	.profit_box_r {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 302rpx;
		height: 198rpx;
		background: #F8F0E5;
		border-radius: 16rpx;
		padding: 20rpx 0;
	}

	.profit_box_tit {
		font-size: 26rpx;
		color: #333333;
		text-align: center;
	}

	.profit_number {
		font-size: 52rpx;
		color: #FE3A1E;
		font-weight: 700;
	}

	.tips {
		width: 100%;
		padding: 20rpx 28rpx;
	}

	.synthesis {
		margin-bottom: 20rpx;
	}

	.synthesis>text:nth-child(1) {
		font-size: 28rpx;
		color: #666666;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.synthesis_box {
		width: 138rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: linear-gradient(270deg, #FC3F32 0%, #FC7232 99%);
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
	}


	.prompt {
		width: 600rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-bottom: 50rpx;
	}

	.prompt>text {
		width: 66%;
		margin-top: 70rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.user_card {
		margin: 30rpx auto 60rpx;
	}

	.btn_xz {
		width: 100%;
	}

	.btn_xz>text:nth-child(1) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #A68A64;
		border: 1rpx solid #A68A64;
		border-radius: 280rpx;
	}

	.btn_xz>text:nth-child(2) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #A68A64;
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 280rpx;
	}
	
	/deep/ .u-navbar__content__right__text {
		color: #ffffff;
		font-size: 24rpx !important;
	}
	
</style>